<template>
  <div class="order">
    <div class="ordet_state">
      <div class="blk fl fs12">{{item.id}}</div>
      <div class="fr" :class="{ green:item.state==1||0, red:item.state==2||3  }">{{item.state|stateTxt}}</div>
    </div>
    <div  ref="wrapper" class="img_list">
      <div v-bind:style="{width: width + 'px' }"  class="imgcov">
        <div v-for="img in item.goodlist" class="img"
             v-bind:style="{ 'background-image': 'url(' + img.img + ')' }"></div>
      </div>
    </div>
    <div class="order_info">
      共{{item.goodlist.length}}件商品 合计:<span class="red">¥<span class="fs18">{{item.totle_prize}}</span></span>(含运费¥{{item.post_prize}})
    </div>
    <div class="btngroup">
      <div class="btn">
        联系客服
      </div>
      <div class="btn">
        取消订单
      </div>
      <div v-if="item.state==0" class="btn btnact">
        立刻支付
      </div>
      <div v-if="item.state==3" class="btn btnact">
        立刻评价
      </div>
      <div v-if="item.state==2" class="btn btnact">
        确认收货
      </div>
    </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  export default {
    name: "orderdetail",
    filters: {
      stateTxt: function (v) {
        switch (v) {
          case 0:
            return '待付款';
          case 1:
            return '代发货';
          case 2:
            return '待收货';
          case 3:
            return '待评价'
        }
      }
    },
    data(){
      return{
        width: 0
      }
    },
    props:{
      item:Object
    },
    mounted() {
      this.width=(this.item.goodlist.length * 80)+20
      this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {
          click: true,
          scrollX:true,
          scrollY:false,
          eventPassthrough:'vertical'
        })
      })
    }
  }
</script>

<style lang="less" scoped>
  .order {
    background-color: #fff;
    height: 220px;
    margin-bottom: 10px;
  }

  .ordet_state {
    line-height: 32px;
    height: auto;
    overflow: auto;
    border-bottom: 1px solid @_lgrey;
    padding: 0 5px;
  }

  .img_list {
    height: 100px;
    border-bottom: 1px solid @_lgrey;
  }

  .img_list .img {
    height: 70px;
    width: 70px;
    border: 1px solid @_blk;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    float: left;
    margin-top: 15px;
    margin-left: 10px;
  }

  .order_info {
    border-bottom: 1px solid @_lgrey;
    line-height: 36px;
    color: @_blk;
    padding-right: 10px;
    text-align: right;
  }

  .btngroup {
    text-align: right;
    line-height: 50px;
  }

  .btn {
    display: inline-block;
    width: 80px;
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
    border: 1px solid @_lgrey;
    text-align: center;
    border-radius: 12px;
  }

  .btnact {
    border: 1px solid @_red;
    color: @_red;
  }
</style>
